<script lang="ts">
import {mapGetters} from "vuex";

export default {
  name: "TodoFooter",
  computed:{
    //是否全部完成 , 用于最下面的单选框
    allFinished() {
      return (this.finished === this.total && this.total !== 0)
    },
    //总数量,完成数量
    ...mapGetters(['total','finished'])
  },
  methods:{
    deleteAll(){
      this.$store.commit('DELETE_ALL')
      //保存到本地
      this.$store.commit('SAVE_DATA');
    }
  }
}
</script>

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox"  :checked="allFinished" />
    </label>
    <span>
          <span>已完成{{finished}}</span> / 全部{{total}}
        </span>
    <button @click="deleteAll" class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<style scoped>

</style>
